<template>
  <!-- 最顶部公共导航 -->
  <div class="header-wrap">
    <div class="content">
      <!-- 左半部分 -->
      <div class="content-left">
        <div class="logo">
          <a href="javascript:;"></a>
        </div>
        <div 
          class="item" 
          v-for="item,index in routerArr" :key="index"
          @click="toOtherPage(index,item.path)" 
          :class="{active:lightHeightIndex == index}"
        >
          <a href="javascript:;">{{item.name}}</a>
          <i class="identify" v-show="lightHeightIndex === index"></i>
        </div>
        <div class="item">
          <a href="javascript:;">商城</a>
        </div>
        <div class="item">
          <a href="javascript:;">音乐人</a>
        </div>
        <div class="item">
          <a href="javascript:;">下载客户端</a>
          <i class="hot"></i>
        </div>
      </div>
      <!-- 右半部分 -->
      <div class="content-right">
        <div class="input">
          <input type="text" ref="showRef" v-model="keyword" @keyup.enter="enter">
          <label class="label" v-if="showLabel" @click="notLabel">音乐/视频/电台/用户</label>
          <i class="seach-icon"></i>
        </div>
        <div class="center">
          创作者中心
        </div>
        <!-- 登录按钮 -->
        <div class="login" v-if="!showLoginBox" @click="showLoginBox = true">登录</div>
        <div class="headshot" v-if="showLoginBox">
          <img src="@/assets/logo.png">
          <!-- 消息数量图标 -->
          <span class="msg-num">28</span>
          <!-- hover下拉框 -->
          <div class="drop-down-box">
            <!-- 灰色三角 -->
            <i class="identify"></i>
            <ul>
              <li>
                <a href="javascript:;">
                  <i class="i-1"></i>
                  <span>我的主页</span>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <i class="i-2"></i>
                  <span>我的消息</span>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <i class="i-3"></i>
                  <span>我的等级</span>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <i class="i-4"></i>
                  <span>VIP会员</span>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <i class="i-5"></i>
                  <span>个人设置</span>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <i class="i-6"></i>
                  <span>实名认证</span>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <i class="i-7"></i>
                  <span>退出</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 登录框 -- 只写了QQ登录 -->
        <div class="login-box-wrap" v-if="showLoginBox">
          <!-- 遮罩 -->
          <div class="login-mask"></div>
          <div class="login-box">
            <div class="login-title">
              <span>登录</span>
              <!-- 叉号 -->
              <i class="icon" @click="cancelLogonBox"></i>
            </div>
            <div class="logo-content">
              <!-- logo -->
              <div class="logo">
                <i class="icon"></i>
              </div>
              <div class="name">
                账号：<input type="text" v-model="user.name">
              </div>
              <div class="password">
                密码：<input type="password" v-model="user.keyword">
              </div>
              <div class="btn">
                <button @click="cancelLogonBox">取消</button>
                <button>登录</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "header-top",
  // 控制高亮和三角形的显示
  props:['lightHeightIndex'],
  mounted(){
    this.$api.login();
  },
  data(){
    return {
      // 控制输入框与ladel的切换
      showLabel:true,
      keyword:'',
      routerArr:[
        {name:'发现音乐',path:'/find-music'},
        {name:'我的音乐',path:'/my-music'},
        {name:'关注',path:'/concern'},
      ],
      // 控制登录框是否出现
      showLoginBox:false,
      // 用户名与密码
      user:{
        name:'123',
        keyword:'12'
      }
    }
  },
  methods:{
    // 控制输入框与ladel的切换
    notLabel(){
      this.showLabel = false;
      this.$refs.showRef.focus();
      
    },
    // 输入框输入之后回车
    enter(){
      this.showLabel = true;
      this.$refs.showRef.blur();
      this.keyword = '';
    },
    // 跳转页面
    toOtherPage(index,path){
      this.$router.push({path});
      this.$emit('changeIndex',index)
    },
    // 点击登录框叉号，是登录框消失
    cancelLogonBox(){
      this.showLoginBox = false
    }
  }
};
</script>

<style scoped lang="scss">
// 遮罩
.login-mask{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.7);
  z-index: 998;
}
// 登录弹框
.login-box{
  width: 500px;
  height: 300px;
  border-radius: 3px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  .login-title{
    width: 100%;
    line-height: 39px;
    height: 39px;
    background-color: #2d2d2d;
    span{
      float: left;
      color: #fff;
      margin-left: 10px;
      font-weight: bold;
      font-size: 14px;
    }
    .icon{
      float: right;
      width: 10px;
      height: 10px;
      margin: 15px 10px 0 0;
      cursor: pointer;
      background: url('@/assets/login-title.png') no-repeat;
      background-position: 0 -95px;
    }
  }
  .logo-content{
    width: 100%;
    .logo{
      width: 100%;
      height: 80px;
      text-align: center;
      .icon{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: url('@/assets/logo.png') no-repeat;
        background-position: -2px -668px;
        margin-top: 30px;
      }
    }
    .name,.password{
      width: 320px;
      margin: 0 auto;
    }
    input{
      width: 280px;
      height: 40px;
      border: 1px solid #333;
      border-radius: 5px;
      margin-top: 10px;
      padding: 10px;
      box-sizing: border-box;
    }
    .btn{
      width: 99px;
      float: right;
      margin-right: 94px;
      button{
        width: 40px;
        height: 25px;
        border: 1px solid #333;
        border-radius: 5px;
        cursor: pointer;
        background-color: #ddd;
        margin-top: 20px;
        &:hover{
          background-color: #eee;
        }
      }
      button:nth-child(1){
        margin-right: 15px;
      }
    }
  }
} 
.header-wrap {
  width: 100%;
  height: 70px;
  background-color: rgb(36, 36, 36);
  .content {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    .content-left {
      display: flex;
      .logo {
        background: url("@/assets/topbar.png") no-repeat;
        width: 157px;
        cursor: pointer;
        // 网易云logo单独padding
        padding-left: 0;
        padding-right: 20px;
      }
      a {
        text-decoration: none;
        padding: 0 19px;
        color: #ccc;
        font-size: 14px;
        line-height: 70px;
        display: block;
      }
      .item{
        position: relative;
        &:hover{
          background-color: #000;
          a{
            color: #fff;
          }
        }
        .identify{
          background: url('@/assets/topbar.png') no-repeat;
          background-position: -226px 0;
          border-bottom: 1px solid rgb(36, 36, 36);
          position: absolute;
          top: 63px;
          left: 50%;
          transform: translate(-50%,0);
          width: 12px;
          height: 6px;
          cursor: pointer;
        }
        .hot {
          background: url("@/assets/topbar.png") no-repeat;
          background-position: -192px 0;
          position: absolute;
          top: 21px;
          left: 100px;
          width: 26px;
          height: 13px;
        }
      }
      // 激活状态
      .active{
        background-color: #000;
        a{
          color: #fff;
        }
      }
    }
    .content-right{
      width: 415px;
      height: 70px;
      // border: 1px solid red;
      display: flex;
      font-size: 12px;
      .input{
        width: 158px;
        // width: 180px;
        height: 32px;
        line-height: 32px;
        margin-top: 19px;
        margin-left: 96px;
        background-color: #fff;
        border-radius: 32px;
        // overflow: hidden;
        color: #9b9b9b;
        position: relative;
        input{
          width: 110px;
          height: 32px;
          margin-left: 28px;
          outline: none;
        }
        .label{
          width: 120px;
          height: 100%;
          position: absolute;
          top: 0;
          left: 30px;
        }
        .seach-icon{
          width: 13px;
          height: 14px;
          background: url('../../assets/topbar.png');
          background-position: -10px 108px;
          position: absolute;
          top: 50%;
          transform: translate(0,-50%);
          left: 10px;
        }
        
      }
      .center{
        width: 90px;
        height: 30px;
        border-radius: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: 19px;
        margin-left: 12px;
        color: #ccc;
        border: 1px solid #4f4f4f;
        cursor: pointer;
        &:hover{
          color: #fff;
          border: 1px solid #ccc;
        }
      }
      .login{
        color: #787878;
        margin-top: 29px;
        margin-left: 10px;
        cursor: pointer;
        &:hover{
          color: #999;
          text-decoration: underline;
        }
      }
      .headshot{
        width: 30px;
        height: 30px;
        background-color: red;
        border-radius: 50%;
        margin-top: 19px;
        margin-left: 20px;
        position: relative;
        z-index: 999;
        &:hover .drop-down-box{
          display: block;
        }
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .msg-num{
          width: 21px;
          height: 16px;
          background-color: #c20c0c;
          border: 1px solid #242424;
          border-radius: 17px;
          text-align: center;
          line-height: 15px;
          color: #fff;
          position: absolute;
          top: -6px;
          left: 20px;
        }
        .drop-down-box{
          width: 158px;
          background-color: #353535;
          cursor: pointer;
          position: absolute;
          left: -64px;
          top: 38px;
          display: none;
          .identify{
            position: absolute;
            width: 16px;
            height: 8px;
            background: url('@/assets/toplist.png');
            background-position: -20px 0;
            top: -8px;
            left: 71px;
          }
          a{
            display: inline-block;
            width: 100%;
            height: 34px;
            line-height: 34px;
            text-decoration: none;
            color: #ccc;
            text-align: center;
            position: relative;
            &:hover{
              background-color: #444444;
              color: #fff;
            }
            i{
              display: inline-block;
              text-align: left;
              width: 18px;
              height: 18px;
              background: url('@/assets/toplist.png');
              position: absolute;
              top: 50%;
              transform: translate(0,-50%);
              left: 25px;
            }
            .i-1{
              background-position: 0 -80px;
            }
            .i-2{
              background-position: -21px -120px;
            }
            .i-3{
              background-position: 0 -99px;
            }
            .i-4{
              background-position: 0 -160px;
            }
            .i-5{
              background-position: 0 -140px;
            }
            .i-6{
              background-position: -20px -142px;
            }
            .i-7{
              background-position: 0 -200px;
            }
          }
        }
      }
    }
  }
}
</style>